<template>
  <div class="app-container">
        <el-button @click="addInit" size="small">新增</el-button>
        <el-table :data="classifyList">
            <el-table-column label="序号" prop="index">

            </el-table-column>
            <el-table-column label="分类" prop="classify">

            </el-table-column>
            <el-table-column label="文章数量" prop="number">

            </el-table-column>
            <el-table-column label="创建时间" prop="createTime">

            </el-table-column>
            <el-table-column>
                <template slot-scope="scope">
                        <span>
                            <el-button type="text" @click="updateInit(scope.row)">修改</el-button>
                            <el-button type="text" @click="deleteInit(scope.row)">删除</el-button>
                        </span>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog :visible.sync="updateFlag" width="30%">
            <span v-if="updateFlag">
                <el-form ref="form" :model="classifyObj" label-width="80px">
                    <el-form-item label="分类">
                        <el-input v-model="classifyObj.classify" size="small" style="width:200px;"></el-input>
                    </el-form-item>
                    <el-form-item label="文章数量">
                        {{classifyObj.number}}
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="updateFlag = false">关闭</el-button>
                <el-button type="primary" @click="addClassify">提交</el-button>
            </span>
        </el-dialog>
  </div>
</template>


<script>
import { queryClassify, addClassify,deleteClassIfy,updateClassify } from '@/api/topic'
export default {
  name: 'classify',
  data() {
    return {
        classifyList:[],
        classifyObj:null,
        updateFlag:false
        
    }
  },
  mounted() {
      this.queryClassify();
  },
  destroyed(){
     
  },
  methods: {
       addInit(){
                this.classifyObj = {
                    classify:"",
                    number:0
                }
                this.updateFlag = true;
       },
       updateInit(row){
                this.classifyObj = row;
                this.updateFlag = true;
       },
       deleteInit(id){
                this.$confirm('确定要删除这个分类？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    this.deleteClassIfy(id);        
                }).catch(() => {

                });
       },
        queryClassify(classify){
            queryClassify({classify:classify}).then((res)=>{
                    this.classifyList = res.data;
            }).catch(()=>{

            })
        },
        addClassify(){
            if(this.classifyObj.id!=null){
                    this.updateClassify();
                   
            }else{
                     addClassify(this.classifyObj).then((res)=>{
                                this.queryClassify();
                                 this.updateFlag = false;
                     }).catch(()=>{

                        })
            }
           
        },
        updateClassify(){
            updateClassify(this.classifyObj).then((res)=>{
                    this.queryClassify();
                     this.updateFlag = false;
            }).catch(()=>{

            })
        },
        deleteClassIfy(id){
            deleteClassIfy({id:id}).then((res)=>{
                    
            }).catch(()=>{

            })
        }
  }
}
</script>

<style scoped>
  .task-log{
      width:80%;
      background: #cccccc;
      height: 300px;
      bottom:20px;
      position:absolute;
      overflow-y: scroll;
  }
  .log-content{
      font-size:10px;
      position: absolute;
      min-height: 100%;
      padding: 20px;
      color:#00BCD4;
  }
  .preview-img{
    width:50px;
    height:40px;
    margin-left:1px;
  }
  .preview-video{
    width:80px;
    height:80px;
  }
  .preview-video-play{
    width:100%;
    height:600px;
  }
  
</style>

